import {Link} from "react-keeper";

require('./PageVoteHome.less');

import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Store from './Store';
import Actions from './Actions';
import * as React from "react";
import {Card, Icon, List, NavBar, TabBar, Tabs, WhiteSpace} from "antd-mobile";

import VoteCard from "../component/VoteCard";

const {API_URL} = require(`./../../../../config/${ENV}.json`);

import Icon_ADD from '../rs/add.png';
import Icon_List_INACTIVE from '../rs/list_inactive.png';
import Icon_List_ACTIVE from '../rs/list_active.png';
import Icon_MY_INACTIVE from '../rs/my_inactive.png';
import Icon_MY_ACTIVE from '../rs/my_active.png';

class VoteHome extends React.Component {
  constructor(props) {
    super(props);
    this.allSubject = this.allSubject.bind(this);
    this.mySubject = this.mySubject.bind(this);
  }

  componentWillMount() {
    Actions.customInit();
  }

  allSubject() {
    Actions.allSubject();
  }

  mySubject() {
    Actions.mySubject();
  }

  newSubject() {
    Actions.newSubject();
  }

  render() {
    return (
      <div style={{position: 'fixed', height: '100%', width: '100%', top: 0}}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
        >
          <TabBar.Item
            icon={
              <div style={{width: '24px', height: '32px'}}>
                <img width="20px" height="20px" src={Icon_List_INACTIVE}/>
                <span style={{fontSize: '12px'}}>问卷</span>
              </div>}
            selectedIcon={
              <div style={{width: '24px', height: '32px'}}>
                <img width="20px" height="20px" src={Icon_List_ACTIVE}/>
                <span style={{fontSize: '12px'}}>问卷</span>
              </div>}
            selected={this.state.home.activeMenu === 'all'}
            onPress={() => {this.allSubject()}}
          >
            <div>
              <div>
                <NavBar
                  mode="dark"
                  onLeftClick={() => console.log('onLeftClick')}
                  rightContent={[
                    <Icon key="0" type="search" style={{marginRight: '16px'}}/>,
                    <Icon key="1" type="ellipsis"/>,
                  ]}
                >问卷列表</NavBar>
              </div>
              <List>
                {
                  this.state.home.subject.all && this.state.home.subject.all.length > 0 && this.state.home.subject.all.map(subject => {
                    let content = <VoteCard
                        title={subject.title}
                        description={subject.description}
                        status={subject.status} creatorName={subject.creatorName} voteCount={subject.voteCount} endTime={subject.endTime.slice(5, 16)}
                        creatorHeadImgUrl={subject.creatorHeadImgUrl}/>;
                    if (subject.status === '草稿') {
                      return (<Link to={'/home/vote/edit/'+subject.id}>{content}</Link>);
                    } else if (subject.status === '进行中') {
                      return (<Link to={'/home/vote/do/'+subject.id}>{content}</Link>);
                    } else if (subject.status === '已结束') {
                      return (<Link to={'/home/vote/result/'+subject.id}>{content}</Link>);
                    } else {
                      return null;
                    }
                  })
                }
              </List>
            </div>
          </TabBar.Item>
          <TabBar.Item
            onPress={() => {this.newSubject()}}
            icon={
              <div style={{width: '32px', height: '32px'}}>
                <img width="32px" height="32px" src={Icon_ADD}/>
              </div>}>
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{width: '24px', height: '32px'}}>
                <img width="20px" height="20px" src={Icon_MY_INACTIVE}/>
                <span style={{fontSize: '12px'}}>我的</span>
              </div>}
            selectedIcon={
              <div style={{width: '24px', height: '32px'}}>
                <img width="20px" height="20px" src={Icon_MY_ACTIVE}/>
                <span style={{fontSize: '12px'}}>我的</span>
              </div>}
            selected={this.state.home.activeMenu === 'my'}
            onPress={() => {this.mySubject()}}
          >
            <div>
              <NavBar
                mode="dark"
                onLeftClick={() => console.log('onLeftClick')}
                rightContent={[
                  <Icon key="0" type="search" style={{marginRight: '16px'}}/>,
                  <Icon key="1" type="ellipsis"/>,
                ]}
              >我的问卷</NavBar>
              <Tabs tabs={[
                { title: '我发布的' },
                { title: '我参与的' }
              ]}
                    initialPage={0}
                    onChange={(tab, index) => { console.log('onChange', index, tab); }}
                    onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
              >
                <List>
                  {
                    this.state.home.subject.my.create && this.state.home.subject.my.create.length > 0 && this.state.home.subject.my.create.map(subject => {
                      let content = <VoteCard
                        title={subject.title}
                        description={subject.description}
                        status={subject.status} creatorName="陈亮" voteCount={subject.voteCount} endTime={subject.endTime}
                        creatorHeadImgUrl="http://thirdwx.qlogo.cn/mmopen/ajNVdqHZLLBZ1mXAzicHdaXG0FicpaLcJSdB34GnREoM5IXI7RUK6zlCAiacVsfK7Y2D6oaEiaZKOqy2OMOZgeu3EA/132"/>;
                      if (subject.status === '草稿') {
                        return (<Link to={'/home/vote/edit/'+subject.id}>{content}</Link>);
                      } else if (subject.status === '进行中') {
                        return (<Link to={'/home/vote/do/'+subject.id}>{content}</Link>);
                      } else if (subject.status === '已结束') {
                        return (<Link to={'/home/vote/result/'+subject.id}>{content}</Link>);
                      } else {
                        return null;
                      }
                    })
                  }
                </List>
                <List>
                  {
                    this.state.home.subject.my.voted && this.state.home.subject.my.voted.length > 0 && this.state.home.subject.my.voted.map(subject => {
                      let content = <VoteCard
                        title={subject.title}
                        description={subject.description}
                        status={subject.status} creatorName="陈亮" voteCount={subject.voteCount} endTime={subject.endTime}
                        creatorHeadImgUrl="http://thirdwx.qlogo.cn/mmopen/ajNVdqHZLLBZ1mXAzicHdaXG0FicpaLcJSdB34GnREoM5IXI7RUK6zlCAiacVsfK7Y2D6oaEiaZKOqy2OMOZgeu3EA/132"/>;
                      if (subject.status === '草稿') {
                        return (<Link to={'/home/vote/edit/'+subject.id}>{content}</Link>);
                      } else if (subject.status === '进行中') {
                        return (<Link to={'/home/vote/do/'+subject.id}>{content}</Link>);
                      } else if (subject.status === '已结束') {
                        return (<Link to={'/home/vote/result/'+subject.id}>{content}</Link>);
                      } else {
                        return null;
                      }
                    })
                  }
                </List>
              </Tabs>
            </div>
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }

}

ReactMixin.onClass(VoteHome, Reflux.connect(Store, 'home'));


export default VoteHome;
